<%--
  Copyright &copy; Well All rights reserved.
  User: Well
  Date:2018-03-03
  Description:ajax的加载效果
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<div>
    <h2>局部遮罩层显示</h2>
    <a href="javascript:$('#west').loading();" class="easyui-linkbutton">西边遮罩层显示</a>
    <a href="javascript:$('#west').loaded();" class="easyui-linkbutton">西边遮罩层消失</a>
    <a href="javascript:$('#north').loading();" class="easyui-linkbutton">北边遮罩层显示</a>
    <a href="javascript:$('#north').loaded();" class="easyui-linkbutton">北边遮罩层消失</a>

    <br/><br/>

    <h2>中间遮罩层显示，5秒后消失</h2>
    <a href="javascript:centerLoading();" class="easyui-linkbutton">中间遮罩层显示</a>

    <br/><br/>

    <h2>全屏遮罩层，5秒后消失</h2>
    <a href="javascript:loading();" class="easyui-linkbutton">中间遮罩层显示</a>

</div>

<script type="text/javascript">

    function centerLoading(){
        var $center=$("#center");
        $center.loading();
        var t=setTimeout(function(){
            $center.loaded();
            clearTimeout(t);
        },5000);
    }

    function loading(){
        $.loading();
        var t=setTimeout(function(){
            $.loaded();
            clearTimeout(t);
        },5000);
    }

</script>